import React,{Component} from 'react'
import Slider from "react-slick";
export default class ScaleBanner extends Component{
    constructor(props){
        super(props)
        this.next = this.next.bind(this);
        this.previous = this.previous.bind(this);
    }
    state = {
        display: true,
        width: 72,
        activeSlide:0,
        activeSlide1:0
    };
    previous(){
        this.slider.slickNext();
    }
    next(){
        this.slider.slickPrev();
    }
    change(c){
        this.slider = c
    }
    componentWillUpdate(a){
      console.log(this.state.activeSlide)
    }
  render() {
    const settings = {
        className: "center",
        infinite: true,
        centerMode: true,
        centerPadding: "60px",
        speed: 1000,
        slidesToShow: 5,
        slidesToScroll: 1,
        vertical:true,
        arrows:false,
        LazyLoad:'progressive',
        focusOnSelect: true,
        beforeChange: (current, next) => this.setState({ activeSlide: next }),
        afterChange: current => this.setState({ activeSlide1: current })
    };
    return (
      <div className="scaleBanner">
        <div
          style={{
            position:'relative',
            width: this.state.width + "px",
            height:'640px',
          }}
        >
          <Slider
          ref={(c)=>this.change(c)}
          {...settings}>
            <div key={1}>
              <img data-id="1" src="http://img1.ochirly.com.cn/wcsstore/TrendyCatalogAssetStore/images/trendy/trendiano/2019/d/3ZC4061190090/3ZC4061190090_s_1.jpg" />
            </div>
            <div key={2}>
                <img data-id="2" src="http://img1.ochirly.com.cn/wcsstore/TrendyCatalogAssetStore/images/trendy/trendiano/2019/d/3ZC4061190090/3ZC4061190090_s_2.jpg" />
            </div>
            <div key={3}>
                <img data-id="3" src="http://img1.ochirly.com.cn/wcsstore/TrendyCatalogAssetStore/images/trendy/trendiano/2019/d/3ZC4061190090/3ZC4061190090_s_3.jpg" />
            </div>
            <div key={4}>
                <img data-id="4" src="http://img1.ochirly.com.cn/wcsstore/TrendyCatalogAssetStore/images/trendy/trendiano/2019/d/3ZC4061190090/3ZC4061190090_s_4.jpg" />
            </div>
            <div key={5}>
                <img data-id="5" src="http://img1.ochirly.com.cn/wcsstore/TrendyCatalogAssetStore/images/trendy/trendiano/2019/d/3ZC4061190090/3ZC4061190090_s_5.jpg" />
            </div>
            <div key={6}>
                <img data-id="0" src="http://img1.ochirly.com.cn/wcsstore/TrendyCatalogAssetStore/images/trendy/trendiano/2019/d/3ZC4061190090/3ZC4061190090_s_6.jpg" />
            </div>
          </Slider>
            <div style={{ textAlign: "center" }}>
                <button className="button prevBtn" onClick={this.previous}>
                  Previous
                </button>
                <button className="button" onClick={this.next}>
                  Next
                </button>
            </div>
        </div>
      </div>
    );
  }
}